<template>
  <div class="comment df fdc">
    <!-- 评分 -->
    <div class="scoreBox df fn">
      <div class="scoreL df fdc aic jcc">
        <div class="scoreL1">{{ (shopData.score / 20).toFixed(1) }}</div>
        <P class="scoreL2">综合评分</P>
        <div class="scoreL3">高于周边商家96%</div>
      </div>
      <div class="scoreR">
        <div class="scoreR1 rr df aic">
          <span class="r1">服务态度</span>
          <van-rate v-model="shopData.score" color="#ffd21e" size="15px" />
          <span class="scoreC">
            {{ (this.shopData.score / 20).toFixed(1) }}
          </span>
        </div>
        <div class="scoreR2 rr df aic">
          <span class="r1">菜品质量</span>
          <van-rate v-model="shopData.score" color="#ffd21e" size="15px" />
          <span class="scoreC">
            {{ (this.shopData.score / 20).toFixed(1) }}
          </span>
        </div>
        <div class="scoreR3 rr df aic">
          <span class="r1">送达时间</span>
          <span class="rTime">{{ shopData.deliveryTime }}分钟</span>
        </div>
      </div>
    </div>
    <!-- 评论 -->
    <div class="commentBox f1">
      <!-- 导航 -->
      <div class="nav fn">
        <van-tabs
          type="card"
          v-model="active"
          title-active-color="#000"
          color="#ffc300"
          duration="0.1"
          @click="onClick"
        >
          <van-tab :title="`全部${rateList.length}`"></van-tab>
          <van-tab :title="`满意${goodRateList.length}`"></van-tab>
          <van-tab :title="`不满意${badRateList.length}`"></van-tab>
        </van-tabs>
      </div>
      <!-- 评论列表 -->
      <van-skeleton title avatar :row="3" :loading="loading">
        <div
          class="commentList df f1"
          v-for="item in showList"
          :key="item.name"
        >
          <van-image round width="1rem" height="1rem" :src="item.avatar" />
          <div class="commentText">
            <div class="df">
              <div class="name">{{ item.username }}</div>
              <div class="ll">{{ item.rateTime | dateFormat }}</div>
            </div>
            <div class="star df aic">
              <van-rate v-model="item.score" color="#ff9900" size="16px" />
              <span class="scoreTime">{{ item.deliveryTime }}分钟送达</span>
            </div>
            <div class="commentT">{{ item.text }}</div>
            <div class="zan df">
              <van-icon class="zanL" name="good-job-o" color="#ffc300" />
              <span
                class="food df aic jcc"
                v-for="(item2, index) in item.recommend"
                :key="index"
              >
                {{ item2 }}
              </span>
            </div>
          </div>
        </div>
      </van-skeleton>
    </div>
  </div>
</template>

<script>
import {getShopRateReq} from '@/api/shop'
import {mapState, mapGetters} from 'vuex'

export default {
  data() {
    return {
      loading: true,
      shopRaTings: {},
      value: 3,
      active: 0,
      show: 0,
      showList: [],
    }
  },
  methods: {
    // ...mapActions('shop', ['A_getShopInfo']),
    async getShopRaTings() {
      let res = await getShopRateReq()
      let {data} = res.data
      // 赋值
      this.shopRaTings = data
    },

    onClick(index) {
      // this.show = index
      // // console.log(this.show)
      if (index === 0) {
        this.showList = this.rateList
      } else if (index === 1) {
        this.showList = this.goodRateList
      } else {
        this.showList = this.badRateList
      }
    },
  },
  computed: {
    ...mapState('shop', ['rateList', 'goodsList', 'shopData']),
    ...mapGetters('shop', ['goodRateList', 'badRateList']),
  },
  created() {
    this.getShopRaTings()
    //初始化发请求
    // this.A_getShopInfo()

    this.$store.dispatch('shop/A_getShopRate')
    this.showList = this.rateList
  },
  mounted() {
    this.loading = false
  },
}
</script>

<style lang="scss" scoped>
.ll {
  margin-left: 230px;
}
.comment {
  height: 100%;
}
.scoreBox {
  width: 100%;
  height: 230px;
  background: #fff;
  padding: 0 30px;
  margin-bottom: 30px;
  .scoreL {
    margin-top: 40px;
    // background: #000;
    height: 150px;
    width: 200px;
    border-right: 1px solid #a1a1a1;
    .scoreL1 {
      font-size: 40px;
      font-weight: 700;
      color: #fdc101;
    }
    .scoreL2 {
      font-size: 20px;
      font-weight: 500;
    }
    .scoreL3 {
      color: #a1a1a1;
    }
  }
  .scoreR {
    margin-top: 50px;
    margin-left: 30px;
    .rr {
      margin-bottom: 13px;
    }
    .r1 {
      margin-right: 5px;
      font-weight: 500;
      font-size: 20px;
    }
    .rTime {
      color: #a1a1a1;
    }
    .scoreC {
      color: #ffc300;
      margin-left: 5px;
    }
  }
}
.commentBox {
  background: #fff;
  padding: 25px 10px;
  height: 100%;
  .nav {
    font-weight: 700;
    font-size: 20px;
  }
}
.commentList {
  margin-top: 20px;
  .commentText {
    margin-left: 10px;
    .name {
      font-weight: 700;
      font-size: 15px;
      margin-bottom: 5px;
    }
    .star {
      margin-bottom: 5px;
      .scoreTime {
        margin-left: 10px;
        color: #a1a1a1;
      }
    }
    .commentT {
      font-size: 17px;
      margin-bottom: 5px;
    }
    .zan {
      margin-bottom: 10px;
      .zanL {
        margin-right: 10px;
      }
      .food {
        min-width: 25px;
        height: 20px;
        // padding: 2px;
        color: #b6b6b6;
        border: 1px solid #b6b6b6;
        margin-right: 5px;
      }
    }
  }
}
</style>
